<!DOCTYPE HTML>
<html>
<head>
<title>Testing first-letter handling of font/text styles</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
html { overflow: hidden; }
body {
  margin: 1em;
  font-size: 25px;
  line-height: 1.2em;
  font-family: serif;
}

div { width: 200px; }
p { width: 0.5em; margin: 0; }
p:first-letter { font-weight: bold; text-transform: uppercase; }
p.reverse:first-letter { font-style: italic; text-transform: lowercase; }
span.floater { float: left; }
span.floater:first-letter { font-family: sans-serif; text-transform: uppercase; }
span.special { display: inline-block; }
span.special:first-letter { font-weight: bold; text-transform: uppercase; }
</style>

</head>
<body>
<div>
<p>yellow corndog</p>
<p class="reverse">HIPPIE BANANA</p>
<p><span class="floater">gonzo macadamia</span></p>
<p class="reverse">FELICITOUS <span class="special">raspberry</span></p>
</div>
</body>
</html>
